<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="libs/layer/css/layer.css">
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/home.css" />

    <title>首页</title>
</head>

<body>
    <div class="container">
        <!-- 头部导航 -->

        <header>
            <div class="head">
                <span class="icon">&#xe60e;</span>
                <ul>
                    <li>热门</li>
                    <li>热舞</li>
                    <li>唱歌</li>
                    <li>游戏</li>
                </ul>
                <button onclick="changeTheme()">夜</button>
            </div>
        </header>

        <!-- 广告图 -->
        <!-- <section>
            <div class=" lunbo">
                <div class="pic">
                    <div class="img"><img src="images/ad_bg.jpg" alt=""></div>
                    <div class="img active"><img src="images/ad_bg.jpg" alt=""></div>
                    <div class="img"><img src="images/ad_bg.jpg" alt=""></div>
                </div>
            </div>
        </section> -->
        <section>
            <div class="swiper-container lunbo">
                <div class="swiper-wrapper pic">
                    <div class="swiper-slide img"><img src="images/ad_bg.jpg" alt=""></div>
                    <div class="swiper-slide img"><img src="images/ad_bg.jpg" alt=""></div>
                    <div class="swiper-slide img"><img src="images/ad_bg.jpg" alt=""></div>
                </div>
            </div>

        </section>


        <!-- 主播分类 -->
        <section>
            <ul class="cate">
                <a href="#">
                    <li><img src="images/cate_01.png" alt="" /> 附近主播</li>
                </a>
                <a href="#">
                    <li><img src="images/cate_02.png" alt="" />最新入驻</li>
                </a>
                <a href="#">
                    <li><img src="images/cate_03.png" alt="" />正在直播</li>
                </a>
                <a href="#">
                    <li><img src="images/cate_04.png" alt="" />我的关注</li>
                </a>
            </ul>
        </section>

        <!-- 推荐标题 -->
        <section>
            <div class="title">
                <h3>热门推荐</h3>
                <a href="#">更多>></a>
            </div>
        </section>


        <!-- 主播列表 -->
        <section>
            <div class="zhubo_list">
                <ul>
                    <a href="zhibojian.html" class="zhubo_item">
                        <li>
                            <div class="zhubo">
                                <img src="images/zhubo_01.jpg" alt="">
                                <div class="zhibozhong">
                                    直播中
                                    <img src="images/xinhao.png" class="xinhao"></img>
                                </div>
                                <h3 class="name">包小图</h3>
                                <p><span class="icon">&#xe697;</span>120万</p>
                            </div>
                            <h3>我和春天有个约会</h3>
                            <p>创意icon、界面、banner这里应有尽有</p>
                        </li>
                    </a>
                    <a href="zhibojian.html" class="zhubo_item">
                        <li>
                            <div class="zhubo">
                                <img src="images/zhubo_02.jpg" alt="">
                                <div class="zhibozhong">
                                    直播中
                                    <img src="images/xinhao.png" class="xinhao"></img>
                                </div>
                                <h3 class="name">包小图</h3>
                                <p><span class="icon">&#xe697;</span>120万</p>
                            </div>
                            <h3>我和春天有个约会</h3>
                            <p>创意icon、界面、banner这里应有尽有</p>
                        </li>
                    </a>
                    <a href="zhibojian.html" class="zhubo_item">
                        <li>
                            <div class="zhubo">
                                <img src="images/zhubo_01.jpg" alt="">
                                <div class="zhibozhong">
                                    直播中
                                    <img src="images/xinhao.png" class="xinhao"></img>
                                </div>
                                <h3 class="name">包小图</h3>
                                <p><span class="icon">&#xe697;</span>120万</p>
                            </div>
                            <h3>我和春天有个约会</h3>
                            <p>创意icon、界面、banner这里应有尽有</p>
                        </li>
                    </a>
                    <a href="zhibojian.html" class="zhubo_item">
                        <li>
                            <div class="zhubo">
                                <img src="images/zhubo_02.jpg" alt="">
                                <div class="zhibozhong">
                                    直播中
                                    <img src="images/xinhao.png" class="xinhao"></img>
                                </div>
                                <h3 class="name">包小图</h3>
                                <p><span class="icon">&#xe697;</span>120万</p>
                            </div>
                            <h3>我和春天有个约会</h3>
                            <p>创意icon、界面、banner这里应有尽有</p>
                        </li>
                    </a>
                    <a href="zhibojian.html" class="zhubo_item">
                        <li>
                            <div class="zhubo">
                                <img src="images/zhubo_02.jpg" alt="">
                                <div class="zhibozhong">
                                    直播中
                                    <img src="images/xinhao.png" class="xinhao"></img>
                                </div>
                                <h3 class="name">包小图</h3>
                                <p><span class="icon">&#xe697;</span>120万</p>
                            </div>
                            <h3>我和春天有个约会</h3>
                            <p>创意icon、界面、banner这里应有尽有</p>
                        </li>
                    </a>
                    <a href="zhibojian.html" class="zhubo_item">
                        <li>
                            <div class="zhubo">
                                <img src="images/zhubo_01.jpg" alt="">
                                <div class="zhibozhong">
                                    直播中
                                    <img src="images/xinhao.png" class="xinhao"></img>
                                </div>
                                <h3 class="name">包小图</h3>
                                <p><span class="icon">&#xe697;</span>120万</p>
                            </div>
                            <h3>我和春天有个约会</h3>
                            <p>创意icon、界面、banner这里应有尽有</p>
                        </li>
                    </a>






                </ul>

            </div>
        </section>
        <div class="clear"></div>

        <!-- 内容底部填充块 -->
        <section>
            <div class="filled"></div>
        </section>


        <!-- 主播工具 -->
        <section>
            <div class="toolscontainer" id="zhubotool">
                <div class="zhubotools">
                    <p>直播工具</p>
                    <ul class="tools_list">
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list01.jpg" alt="">
                                <p>在线直播</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list02.jpg" alt="">
                                <p>美颜工具</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list03.jpg" alt="">
                                <p>视频管理</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list04.jpg" alt="">
                                <p>制作影片</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list05.jpg" alt="">
                                <p>字体选择</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list06.jpg" alt="">
                                <p>拍短视频</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list07.jpg" alt="">
                                <p>发布动态</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="images/zhibo_tools_list08.jpg" alt="">
                                <p>直播公告</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </section>


        <!-- 底部导航栏 -->

        <footer>
            <div class="nav">
                <ul>


                    <li>
                        <a href="home.html">
                            <img src="images/nav_01.png" alt="">
                            <img src="images/nav_active01.png" alt="">
                            <p>首页</p>
                        </a>
                    </li>



                    <li>
                        <a href="cate.html">
                            <img src="images/nav_02.png" alt="">
                            <img src="images/nav_active02.png" alt="">
                            <p>分类</p>
                        </a>
                    </li>


                    <li id="zhubo_tools3" class="zhubo_toolsbtn" onclick="dispZhuBoTools()">
                        <img src="images/nav_center.png" alt="">
                        <div class="mengban"></div>
                    </li>


                    <li>
                        <a href="discover.html">
                            <img src="images/nav_03.png" alt="">
                            <img src="images/nav_active03.png" alt="">
                            <p>发现</p>
                        </a>
                    </li>


                    <li>
                        <a href="my.html">
                            <img src="images/nav_04.png" alt="">
                            <img src="images/nav_active04.png" alt="">
                            <p>我的</p>
                        </a>
                    </li>

                </ul>
            </div>
        </footer>

    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="libs/layer/js/layer.js"></script>
    <script src="js/commen.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: true,
            delay: 2500,
            slidesPerView: 'auto',
            centeredSlides: true,
            effect: 'coverflow',
            coverflowEffect: {
                rotate: 30,
                stretch: 12,
                depth: 60,
                modifier: 2,
                slideShadows: true
            },
            stopLastSlide: false

        });
    </script>

</body>

</html>